<template>
	<view>
		<view style="border-left: none; border-right: none; padding-bottom: 0; ">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
				styleType="text"></uni-segmented-control>
			<view style="background-color: #f1f1f1;" v-show="current === 0">
				<view class="datePickBox">
					<uni-datetime-picker type="date" v-model="searchDate" @change="checkDate"
						:clear-icon="false" style="background-color: #e2e2e2;  border-radius: 20rpx;" />
				</view>
				<view class="midBoxContent">
					<view class="header" style="">宿舍</view>
					<view class="header" style="text-align: center;">姓名</view>
					<view class="header" style="text-align: right;">状态</view>
				</view>
				<view :class="index == 0 ?'firstBox' : ''" class="container" v-for="(item,index) in unCheckStudentList"
					:key="index" style="display: flex; align-items: center; ">
					<view class="" style="width: 200rpx; text-align: left;">
						<view class="">{{item.dormitoryNo}}</view>
						<view class="" style="color: #aaa;">
							{{item.buildingNo =='1' ?'畔湖苑':(item.buildingNo =='5'?'听湖苑':'')}}/{{convertToChineseNumeral(item.storey)}}层
						</view>
					</view>
					<view class="" style="width: 200rpx;text-align: center;">{{item.studentName}}</view>
					<view class="" style="text-align: right; width: 200rpx; margin-left: 40rpx;">
						<view v-if="item.applyStatus == ' '">
							<view class="button" style="background-color: grey;" @click="toNotCheck(item)">未打卡</view>
							<view class="textBox">需要完成补卡</view>
						</view>

						<view v-if="item.currentApprover != userName && item.applyStatus != ' ' ">
							<view class="button" style="background-color: #c184f6;" @click="toProcess(item)">处理中
							</view>
							<view class="textBox" v-if="item.approveNode == 'classTeacherHandle'">等待班主任处理</view>
							<view class="textBox" v-if="item.approveNode == 'deptManageHandle'">等待部门经理处理</view>
						</view>
						<view v-if="item.currentApprover == userName">
							<view class="button" style="background-color: #0042f4;" @click="toViolation(item)">待处理
							</view>
							<view class="textBox">需要再次完成补卡</view>
						</view>
					</view>
				</view>
				<view class="" style="position: absolute; left: 10%; top: 100%;" v-if="unCheckStudentList.length <= 0">
					<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode=""></image>
				</view>
			</view>

			<view v-show="current == 1" style="background-color: #f1f1f1;">
				<view class="datePickBox">
					<uni-datetime-picker type="date" v-model="searchDate" @change="checkDate" @maskClick="maskClick"
						:clear-icon="false" style="background-color: #e2e2e2;  border-radius: 20rpx;" />
				</view>
				<view class="midBoxContent">
					<view class="header" style="">宿舍</view>
					<view class="header" style="text-align: center;">姓名</view>
					<view class="header" style="text-align: right;">状态</view>
				</view>
				<view :class="index == 0 ?'firstBox' : ''" class="container" v-for="(item,index) in unCheckStudentList"
					:key="index" style="display: flex; align-items: center; ">
					<view class="" style="width: 200rpx; text-align: left;">
						<view class="">{{item.dormitoryNo}}</view>
						<view class="" style="color: #aaa;">
							{{item.buildingNo =='1' ?'畔湖苑':(item.buildingNo =='5'?'听湖苑':'')}}/{{convertToChineseNumeral(item.storey)}}层
						</view>
					</view>
					<view class="" style="width: 200rpx;text-align: center;">{{item.studentName}}</view>
					<view class="" style="text-align: right; width: 200rpx; margin-left: 40rpx;">
						<view v-if="item.applyStatus == ' '">
							<view class="button" style="background-color: grey;" @click="toNotCheck(item)">未打卡</view>
							<view class="textBox">需要完成补卡</view>
						</view>
						<view v-if="item.currentApprover != userName && item.applyStatus != ' ' ">
							<view class="button" style="background-color: #c184f6;" @click="toProcess(item)">处理中
							</view>
							<view class="textBox" v-if="item.approveNode == 'classTeacherHandle'">等待班主任处理</view>
							<view class="textBox" v-if="item.approveNode == 'deptManageHandle'">等待部门经理处理</view>
						</view>
						<view v-if="item.currentApprover == userName">
							<view class="button" style="background-color: #0042f4;" @click="toViolation(item)">待处理
							</view>
							<view class="textBox">需要再次完成补卡</view>
						</view>
					</view>
				</view>
				<view class="" style="position: absolute; left: 10%; top: 100%;" v-if="unCheckStudentList.length <= 0">
					<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	import dormitoryCheck from "@/api/modules/dormitoryCheck.js"
	import teacherClass from "@/api/modules/teachClass.js"
	import taskNotReturned from "@/api/modules/taskNotReturned.js"
	import {
		parseTime
	}
	from "@/utils/date.js"
	export default {
		data() {
			return {
				// 左箭头返回地址
				bzrUrl: "/pages/index/supervisorIndex",
				// 用户名
				topName: "未打卡学生",
				userName: "",
				// 查询日期
				searchDate: "",
				// 身份
				userInfo: "",
				// 楼栋列表
				buildList: [],
				// 楼栋NO
				buildNo: "1",
				// 未打卡学生列表
				unCheckStudentList: [],
				// 当前页面
				current: 0,
				// 分段器头部
				items: ["畔湖苑", "听湖苑"],
				attenceStatus: "",
				storey: "",
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				if (e.currentIndex == 0) {
					this.buildNo = 1
					this.getList()
				} else if (e.currentIndex == 1) {
					this.buildNo = 5
					this.getList()
				}
			},
			maskClick() {
				console.log(this.searchDate)
			},
			changeBuild(e) {
				dormitoryCheck.getSdAttenceByCondition({
					accessDate: this.searchDate + " 00:00:00",
					buildingNo: e,
					attenceStatus: 2,
				}).then(res => {
					this.unCheckStudentList = res.data
				})
			},
			getList() {
				dormitoryCheck.getSdAttenceByCondition({
					accessDate: this.searchDate + " 00:00:00",
					buildingNo: this.buildNo,
					attenceStatus: 2,
				}).then(res => {
					this.unCheckStudentList = res.data
				})
			},
			checkDate(e) {
				this.searchDate = e
				dormitoryCheck.getSdAttenceByCondition({
					accessDate: this.searchDate + " 00:00:00",
					buildingNo: this.buildNo,
					attenceStatus: 2,
				}).then(res => {
					this.unCheckStudentList = res.data
				})
			},
			toApply(item) {
				uni.navigateTo({
					url: `/pages_main/managementTeacher/absenceApply/absenceApply?studentId=${item.studentId}&id=${item.id}&accessDate=${item.accessDate}&reason=${item.reason}&buildNo=${this.buildNo}&searchDate=${this.searchDate}&current=${this.current}`
				})
			},
			toViolation(item) {
				uni.navigateTo({
					url: `/pages_main/managementTeacher/violationHandle/violationHandle?studentId=${item.studentId}&id=${item.id}&accessDate=${item.accessDate}&reason=${item.reason}&buildNo=${this.buildNo}&searchDate=${this.searchDate}&processInstanceId=${item.processInstanceId}&current=${this.current}`
				})
			},
			toProcess(item) {
				uni.navigateTo({
					url: `/pages_main/managementTeacher/processHandle/processHandle?studentId=${item.studentId}&id=${item.id}&accessDate=${item.accessDate}&reason=${item.reason}&buildNo=${this.buildNo}&searchDate=${this.searchDate}&current=${this.current}`
				})
			},
			toAbsenceFromDuty(item) {
				uni.navigateTo({
					url: `/pages_main/managementTeacher/absenceFromDuty/absenceFromDuty?studentId=${item.studentId}&id=${item.id}&accessDate=${item.accessDate}&reason=${item.reason}&buildNo=${this.buildNo}&searchDate=${this.searchDate}&current=${this.current}`
				})
			},
			toCompleteCheck(item) {
				uni.navigateTo({
					url: `/pages_main/managementTeacher/completeCheck/completeCheck?studentId=${item.studentId}&mendCardPhoto=${item.mendCardPhoto}&modifyTime=${item.modifyTime}&buildNo=${this.buildNo}&searchDate=${this.searchDate}&current=${this.current}`
				})
			},
			toNotCheck(item) {
				uni.navigateTo({
					url: `/pages_main/managementTeacher/notCheck/notCheck?studentId=${item.studentId}&id=${item.id}&accessDate=${item.accessDate}&buildNo=${this.buildNo}&searchDate=${this.searchDate}&current=${this.current}`
				})
			},
			convertToChineseNumeral(num) {
				if (num == 10) {
					return '十'
				} else if (num == 1) {
					return '一'
				}
				const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
				const units = ['', '十', '百', '千', '万'];
				let result = '';
				let numStr = num.toString();
				for (let i = 0; i < numStr.length; i++) {
					let digit = parseInt(numStr.charAt(i));
					let unit = units[numStr.length - i - 1];
					if (digit === 0) {
						// 当前数字为0时不需要输出汉字，但需要考虑上一个数字是否为0，避免出现连续的零
						if (result.charAt(result.length - 1) !== '零') {
							result += '零';
						}
					} else {
						result += digits[digit] + unit;
					}
				}
				// 对于一些特殊的数字，如10、100等，需要在最前面加上“一”
				if (result.charAt(0) === '一') {
					result = result.substr(1, result.length);
				} else if (result.charAt(0) === '百') {
					result = '一' + result;
				} else if (result.charAt(0) === '千') {
					result = '一' + result;
				}
				return result;
			},
			// 楼栋列表
			findDormBuilding() {
				dormitoryCheck.findDormBuilding().then(res => {
					res.data.forEach(item => {
						let obj = {}
						obj.text = item.dictLabel
						obj.value = item.dictValue
						this.buildList.push(obj)
					})
				})
			},
			// 获取未打卡学生列表
			getSdAttenceByCondition() {
				dormitoryCheck.getSdAttenceByCondition({
					accessDate: this.searchDate + " 00:00:00",
					buildingNo: 1,
				}).then(res => {
					this.unCheckStudentList = res.data
				})
			},
			// 初始化
			initSdAttenceByCondition() {
				dormitoryCheck.getSdAttenceByCondition({
					accessDate: parseTime(Date.now()).slice(0, 10) + " 00:00:00",
					buildingNo: '1',
					attenceStatus: 2,
				}).then(res => {
					this.unCheckStudentList = res.data
				})
			},
		},
		onLoad(options) {
			console.log(options)
			this.userName = uni.getStorageSync("userName")
			this.userInfo = uni.getStorageSync("userRole")
			this.findDormBuilding()
			if (options.current) {
				this.current = Number(options.current)
			}
			if (options.searchDate) {
				this.searchDate = options.searchDate
				this.buildNo = options.buildNo
				dormitoryCheck.getSdAttenceByCondition({
					accessDate: this.searchDate + " 00:00:00",
					buildingNo: this.buildNo,
					attenceStatus: 2,
				}).then(res => {
					this.unCheckStudentList = res.data
				})
				return
			}
			this.searchDate = parseTime(Date.now()).slice(0, 10)
			this.initSdAttenceByCondition()

			if (options.flag == 9) {
				this.bzrUrl =
					`/pages_main/managementTeacher/allTypeUnStudentList/allTypeUnStudentList?buildNo=${options.buildNo}&date=${options.searchDate}&current=${options.current}&storey=${options.storey}&attenceStatus=${options.attenceStatus}`
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		/* background-color: #f1f1f1;  */
		/* height: 100vh; */
	}

	.miniButtonCard {
		width: 100rpx;
		background-color: antiquewhite;
		height: 75rpx;
		text-align: center;
		line-height: 75rpx;
	}

	.miniButtonHand {
		width: 100rpx;
		background-color: darkseagreen;
		height: 75rpx;
		text-align: center;
		line-height: 75rpx
	}

	.bigHandle {
		width: 100rpx;
		background-color: orange;
		height: 75rpx;
		text-align: center;
		line-height: 75rpx
	}

	.bigOver {
		width: 100rpx;
		background-color: green;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx
	}

	.midContent {
		border: 1rpx solid #ddd;
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		height: 75rpx;
		justify-content: space-around;
		border-radius: 10rpx;
	}

	.card {
		display: flex;
		align-items: center;
		padding: 40rpx 40rpx;
		font-size: 28rpx;
		/* border-top: 1rpx solid #ddd; */
	}

	.cardBorder {
		border-top: 1rpx solid #ddd;
	}

	.miniButton {
		padding: 15rpx 25rpx;
		border-radius: 10rpx;
		color: #fff;
		margin-left: 50rpx;
	}


	.button {
		/* padding: 10rpx 40rpx; */
		/* width: 200rpx; */

		text-align: center;
		color: #fff;
		/* background-color: red; */
		border-radius: 20rpx;
		font-size: 28rpx;
		padding: 10rpx 0;
		/* margin-left: 20rpx; */
	}

	.container {
		padding: 30rpx 50rpx;
		/* border-bottom: 1rpx solid #ddd; */
		text-align: center;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.header {
		color: #000;
		width: 200rpx;
	}

	page {
		background-color: #f1f1f1;
	}

	/deep/.uni-date-x[data-v-6e13d7e2] {
		background-color: #e2e2e2;
		border-radius: 20rpx;
	}

	.textBox {
		text-align: center;
		padding: 10rpx 0;
		color: #aaa;
		font-size: 24rpx;
		/* padding: 5rpx 0; */

	}

	.firstBox {
		margin-top: 40rpx;
	}

	.midBoxContent {
		display: flex;
		font-size: 36rpx;
		font-weight: 700;
		padding: 30rpx 70rpx;
		border-radius: 20rpx;
		background-color: #fff;
		justify-content: space-around;
	}

	.datePickBox {
		padding: 40rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
		background-color: #f1f1f1;
	}

	/deep/.segmented-control[data-v-064e9cd1] {
		height: 60rpx;
	}

	/deep/.segmented-control__item--text[data-v-064e9cd1] {
		padding: 6rpx;
		border-bottom-width: 6rpx;
	}
</style>